<template>
	<div class="block">
		<div class="block-left">
			<iconpark-icon fill="#fff" class="icon" :name="icon"></iconpark-icon>
			<div class="txt">
				<div class="txt-top">{{ zh }}</div>
				<!-- <div class="txt-bottom">{{ toUpper(en) }}</div> -->
				<div class="wrapper"></div>
			</div>
		</div>
		<div class="block-right">
			<div class="value">{{ value }}</div>
			<div class="unit">{{ unit }}</div>
		</div>
	</div>
</template>

<script setup name="block">
const props = defineProps({
	icon: {
		type: String,
		default: 'gongzuomianjiance'
	},
	zh: {
		type: String,
		default: ''
	},
	en: {
		type: String,
		default: ''
	},
	value: {},
	unit: {
		type: String,
		default: ''
	}
})
const toUpper = (txt) => txt.toUpperCase(txt)
</script>

<style lang="scss" scoped>
.block {
	color: #fff;
	width: calc(50% - 10px);
	height: 50px;
	padding: 10px;
	margin: 5px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid rgba(76, 107, 209, 0.5);
	box-shadow: inset 0px 0px 8px 0px #3468d8;

	&-left {
		display: flex;
		align-items: center;
		.icon {
			color: #fff;
			font-size: 22px;
			margin-right: 5px;
		}
		.txt {
			position: relative;
			display: flex;
			flex-direction: column;

			&-top {
				text-align: center;
				width: 100%;
				font-size: 12px;
			}
			&-bottom {
				text-align: center;
				width: 100%;
				font-size: 6px;
			}
			.wrapper {
				position: absolute;
				width: 100%;
				height: 100%;
				// opacity: 0.4;

				background: #3168db;
				border-radius: 50%;
				transform-origin: 50% 50%;
				transform: scale(1.8);
				filter: blur(50px);
			}
		}
	}
	&-right {
		display: flex;
		align-items: center;
		.value {
			font-size: 18px;
			margin-right: 5px;
		}
		.unit {
			font-size: 12px;
		}
	}
}
</style>
